<template>
  <div class="doctor-list">
    <van-nav-bar
      title="查找医生"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="share-o" color="#000" size="18" />
      </template>
    </van-nav-bar>
    <van-search placeholder="请输入医生姓名" />
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item title="科室">
        <van-tree-select
          v-model:active-id="state.activeId"
          v-model:main-active-index="state.activeIndex"
          :items="items"
        />
      </van-dropdown-item>
      <van-dropdown-item title="服务">
        <div class="service">
          <h3>价格区间</h3>
          <div>
            <van-tag type="default" size="large">10-20</van-tag>
            <van-tag type="default" size="large">20-30</van-tag>
            <van-tag type="success" size="large">30-50</van-tag>
            <van-tag type="default" size="large">50以上</van-tag>
          </div>
        </div>
        <div class="service">
          <h3>医生职称</h3>
          <div>
            <van-tag type="default" size="large">住院医师</van-tag>
            <van-tag type="primary" size="large">主治医师</van-tag>
            <van-tag type="default" size="large">副主任医师</van-tag>
            <van-tag type="default" size="large">主任医师</van-tag>
          </div>
        </div>
        <div class="service-option">
          <van-button round size="small" block>重置</van-button>
          <van-button type="primary" size="small" round block>确定</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="地区">
        <p class="area-item" v-for="index in 20" :key="index">{{ index }}</p>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="main">
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          thumb="https://download-sdk.oss-cn-beijing.aliyuncs.com/downloads/IMDemo/avatar/Image1.png"
          v-for="i in state.list"
          :key="i"
          @click="gotoDoctorInfo(i)"
        >
          <template #title>
            <div class="card-title">医生姓名{{ i }}</div>
          </template>
          <template #desc>
            <div class="card-desc">
              医生描述
              白衣天使,即是穿白大褂的护士。意思是说:他们纯洁、善良、富有爱心;他们救死扶伤,童叟无
            </div>
          </template>
          <template #tags>
            <div class="card-tags">
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <van-tag plain type="success" style="margin-left: 20px"
                >主治医师</van-tag
              >
            </div>
          </template>
        </van-card>
      </van-list>
    </div>

    <van-share-sheet
      v-model:show="showShare"
      title="立即分享"
      :options="options"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "DoctorList",

  created() {},

  setup() {
    //实例化路由
    const router = useRouter();
    //下拉菜单
    const state = reactive({
      value1: 0,
      value2: "a",
      activeId: 1,
      activeIndex: 0,

      list: [], //
      loading: false,
      finished: false,
    });
    //评分
    const value = ref(3);
    //树形选择
    const items = [
      {
        text: "浙江",
        children: [
          { text: "杭州", id: 1 },
          { text: "温州", id: 2 },
        ],
      },
      {
        text: "江苏",
        children: [
          { text: "南京", id: 5 },
          { text: "无锡", id: 6 },
        ],
      },
    ];

    const option1 = [
      { text: "全部商品", value: 0 },
      { text: "新款商品", value: 1 },
      { text: "活动商品", value: 2 },
    ];
    const option2 = [
      { text: "默认排序", value: "a" },
      { text: "好评排序", value: "b" },
      { text: "销量排序", value: "c" },
    ];

    //是否显示分享面板
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
    ];

    //分享
    const onClickRight = () => {
      showShare.value = true;
    };
    //返回
    const onClickLeft = () => {
      router.push("/index");
    };

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          state.list.push(state.list.length + 1);
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true;
        }
      }, 1000);
    };
    //去医生信息
    const gotoDoctorInfo = (id) => {
      router.push({
        path: `/doctorInfo/${id}`,
      });
    };

    ///===========================

    return {
      onClickRight,
      onClickLeft,
      options,
      showShare,
      state,
      option1,
      option2,
      items,
      onLoad,
      value,
      gotoDoctorInfo,
    };
  },
});
</script>


<style lang="less" scoped>
.doctor-list {
  text-align: left;
  background: #f6f7f9;
}
.doctor-list .main {
  padding: 5px 10px;
}

.area-item {
  text-align: center;
  font-size: 16px;
}

.service {
  padding: 0 10px;
}
.service > div {
  display: flex;
  justify-content: space-between;
}
.service-option {
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
}
.service-option button {
  margin-left: 5px;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.card-desc {
  margin: 5px 0;
}

.card-tags {
  display: flex;
  align-items: center;
}
</style>
